<template>
  <div class='page-container'>
    <div class="btn">
      <a class="btn" href="/test.docx" download="">test1</a>
    </div>

    <div class="btn" v-for="(course,courseIndex) in courseList.classArrangeFileList" :key="courseIndex" @click="downloadCourse(course.url,course.name)">{{course.name}}</div>
  </div>
</template>
<script>
import { mapState } from 'vuex'

export default {
  name: 'course',
  components: {},
  computed: {
    ...mapState({
      userInfo: (state) => state.common.userInfo
    })
  },
  data() {
    return {
      courseList: {
        classArrangeFileList: [
          {url: '/test.docx', name: 'test'}
        ]
      }
    }
  },
  created() {
  },
  mounted() {
  },
  beforeDestroy() {
  },
  methods: {
    downloadCourse(url,name) {
      this.downloadFile(url, name)
    },
    downloadFile (url, fileName) {
      let _this = this
      let xhr = new XMLHttpRequest()
      xhr.open('GET', url)
      xhr.responseType = 'blob'
      xhr.onload = function () {
        // 请求完成
        let blob = this.response
        console.log(blob)
        // 创建隐藏的可下载链接
        let eleLink = document.createElement('a')
        eleLink.download = fileName
        eleLink.style.display = 'none'
        // eleLink.href = url
        let blobURL = URL.createObjectURL(blob);
        eleLink.href = blobURL
        // 触发点击
        document.body.appendChild(eleLink)
        eleLink.click()
        // 然后移除
        document.body.removeChild(eleLink)
        window.URL.revokeObjectURL(blobURL)
      }
      xhr.ontimeout = function(e) {
        //下载超时请重试
        console.log(e)
        // _this.$message.error('下载超时请重试')
      }
      xhr.onerror = function(e) {
        //下载出错
        console.log(e)
        // _this.$message.error('下载出错，请联系管理员')
      }
      // 发送ajax请求
      xhr.send()
    },
    fileDownload(blob, filename, mime) {
      // var blob = new Blob(blob, {type: mime || 'application/octet-stream'})
      if (typeof window.navigator.msSaveBlob !== 'undefined') {
        // IE workaround for "HTML7007: One or more blob URLs were
        // revoked by closing the blob for which they were created.
        // These URLs will no longer resolve as the data backing
        // the URL has been freed."
        window.navigator.msSaveBlob(blob, filename)
      } else {
        let blobURL = window.URL.createObjectURL(blob)
        let tempLink = document.createElement('a')
        tempLink.style.display = 'none'
        tempLink.href = blobURL
        tempLink.setAttribute('download', filename)
        tempLink.setAttribute('target', '_blank')
        document.body.appendChild(tempLink)
        tempLink.click()
        document.body.removeChild(tempLink)
        window.URL.revokeObjectURL(blobURL)
      }
    }
  }
}
</script>

<style scoped lang="less">
.page-container {
  display: flex;
  justify-content: center;
  align-items: center;
  .btn {
    margin: 30px auto;
    width: 100px;
    height: 50px;
    background-color: red;
    text-align: center;
  }
}
</style>
